<template>
    <div class="uploader-wrapper">
        <van-uploader v-model="fileList" multiple :before-read="beforeRead" :after-read="afterRead" @delete="onDelete"
            preview-size="[65,80]" :max-count="props.maxCount" :upload-icon="uploadIcon" @oversize="onOversize"
            :deletable="props.isEdit">
            <template #preview-cover="">
                <div v-if="props.bottomTest" class="preview-cover van-ellipsis">{{ props.bottomTest }}</div>
            </template>
            <van-image v-if="props.isEdit" width="65" height="80" :src="uploadIcon">
                <div v-if="props.bottomTest" class="preview-cover van-ellipsis">{{ props.bottomTest }}</div>
            </van-image>
        </van-uploader>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import ZYBW from '@/util/request/index.js';
import uploadIcon from '@/assets/img/main/add_img.png';
import { v4 as uuidv4 } from 'uuid';

const props = defineProps({
    fileUrl: {
        default: null
    },
    file: {
        default: null
    },
    files: {
        default: null
    },
    maxCount: {
        default: 5
    },
    bottomTest: {
        default: null
    },
    isEdit: {
        default: true
    },
    names: {
        default: ''
    }
});

const emit = defineEmits(['files-selected']);
const fileList = ref([]);
if (props.file) {
    console.log(props.file);
    var file = props.file
    file.previewSize = [65, 80];
    file.url = file.imgUrl
    file.objectUrl = ''
    fileList.value.push(props.file)
}
if (props.files) {
    console.log("3333", props.files);
    var files = props.files
    files.forEach(item => {
        item.previewSize = [65, 80];
        item.url = item.imgUrl
        item.objectUrl = ''
    });
    fileList.value = files
}
// 定义文件列表
watch(() => props.fileUrl, (newShow) => {
    if (!fileList.value || fileList.value.length < 1 || props.fileUrl != fileList.value[0].url) {
        updateFileUrl()
    }
});

// 定义文件列表
watch(() => props.files, (newShow) => {
    if (props.files != fileList.value) {
        var files = props.files

        files.forEach(item => {
            item.previewSize = [65, 80];
            item.url = item.imgUrl
            item.objectUrl = ''
        });
        fileList.value = files
    }
});

const updateFileUrl = () => {
    var str = props.fileUrl
    var files = [];
    str.split(',').forEach(item => {
        if (item) {

            var file = {

            }

            file.previewSize = [65, 80];
            file.imgUrl = item
            file.url = item
            file.objectUrl = ''
            files.push(file)
        }
    })
    fileList.value = files
};

// 文件读取之前的处理
const beforeRead = (file) => {
    console.log(file);
    console.log(fileList.value);
    return true;
};

// 文件读取之后的处理
const afterRead = (file) => {
    console.log('文件读取之后的处理', fileList.value);
    emit('files-selected', fileList.value);
    if (Array.isArray(file)) {
        file.forEach(f => {
            f.previewSize = [65, 80];
            uploadFile(f.file);
        }
        );
    } else {
        file.previewSize = [65, 80];
        uploadFile(file.file);
    }
};

// 文件删除时的处理
const onDelete = (file) => {
    fileList.value = fileList.value.filter(item => item.url !== file.url);
};

// 文件超出大小限制时的处理
const onOversize = (file) => {
    this.$toast('文件大小超出限制');
};

// 文件上传到后台服务器
const uploadFile = async (file1) => {

    try {
        const { code, msg, data } = await ZYBW.post({
            url: '/api/seedarchive/file/batchUploadGenerateDate',
            data: {
                files: file1,
                serviceName: 'seedarchive',
            },
            contentType: 'multipart/form-data',
        });

        // console.log(data);
        if (code && code === 200 && data && data[0] && data[0].url) {
            // console.log('file1', file1);
            // console.log(data);
            // 将服务器返回的文件 URL 添加到文件列表
            let array = fileList.value
            for (let index = 0; index < array.length; index++) {
                const item = array[index];
                item.orderValue = index + 1
                if (item.file && item.file === file1) {
                    item.url = data[0].url
                    item.imgUrl = data[0].url
                    item.content = ''
                    if (!item.fillingSaleFileID || item.fillingSaleFileID.length == 0) {
                        item.fillingSaleFileID = uuidv4()
                    }
                }
            }
            emit('files-selected', fileList.value);
            console.log(fileList.value);
        }
    } catch (error) {

        console.log(error);
    }
};
</script>

<style>
.uploader-wrapper {}

.preview-cover {
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
    width: 100%;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
}
</style>